<!-- 首页 -->
<template>
	<view class="theme-bg1">
		<nv :config="config"></nv>
		<view class="theme-bg" style="z-index: 9999;top: 0;width: 100%;">
			<search @searchChange="searchChange" class="theme-bg" ref="search "></search>
		</view>

		<view style=" background: linear-gradient(180deg,#ff7984,#ff7199 10%,rgba(255,214,41,.01) 40%);">
			<!-- banner图 -->
			<ls-swiper :list="bannerList" imgKey="url" :interval="5000" :dots="true" :autoplay="true" :crown="true"
				:loop="true" :shadow='true' height='175' previousMargin="80" nextMargin='80' imgRadius="5" />
		</view>

		<!-- 流量主-腾讯广告 -->
		<!-- <ad unit-id="adunit-961458988ac9ad8b" ad-intervals="30"></ad> -->

		<!-- 通知公告 -->
		<view class="" style="position: relative;">
			<view class="ad">
				<view class="tctt">公告通知</view>
				<swiper autoplay="true" circular="true" class="ad1 newest_content gobyndsingle" interval="3000"
					style="background-color:#ffffff" vertical="true">
					<swiper-item v-for="(item,index) in informList" :key="index">
						<view class="adinfo gobyndsingle" :data-id="item.id" style="color:#E91E63;">
							{{item.content}}
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 内容板块 -->
		<view class="" style="margin: 0 20rpx;position: relative;overflow: hidden;">
			<view class="popular">
				<view class="c-header">
					<view class="c-left">
						<image class="c-icon" :src="imageURL" mode=""></image>
						<view class="c-title">热门话术</view>
					</view>
					<view class="c-right" @click="goPopularList">
						<view class="c-more">更多</view>
						<view class="c-more-icon" >↻</view>
					</view>
				</view>
				<view class="c-content">
					<view class="c-swiper">
						<swiper style="height: 240rpx;width: 90vw;" class="swiper" circular
							:indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
							:duration="duration">
							<swiper-item v-for="(item,index) in cList" :key="index">
								<view class=""
									style="display: flex;align-items: center;flex-wrap: wrap;font-size: 15px;">
									<view @tap="toChat(item1)" class="label" v-for="(item1,index1) in item.children"
										:key="index1">
										<view class="">
											{{item1.title}}
										</view>
										<view class="hot" v-if="item1.hot == 1">
											热
										</view>
									</view>
								</view>
							</swiper-item>

						</swiper>

					</view>
				</view>
			</view>
			<view class="recommend">
				<view class="c-header">
					<view class="c-left">
						<image class="c-icon" :src="recommendURL" mode=""></image>
						<view class="c-title">为你推荐</view>
					</view>
					<view class="c-right" @click="goRecommend">
						<view class="c-more">更多</view>
						<view class="c-more-icon"></view>
					</view>
				</view>
				<view class="r-content">
					<view class="r-swiper">
						<view class="img-box"
							style="background-image:url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f192c560-89d8-49ca-aee7-06e479a9646b/d505baae-3965-44eb-83b5-b8f62a34b4ec.png') "
							@click="goScript">
							<view class="" style="color: #a7784e;font-size: 35rpx;">
								话术大全
							</view>
							<view class="" style="color: #e1c1a3;font-size: 30rpx;">
								教你聊天
							</view>

						</view>
						<view class="" style="width: 20rpx;">

						</view>
						<view class="img-box"
							style="background-image:url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f192c560-89d8-49ca-aee7-06e479a9646b/06be8627-a741-49ab-b946-21df71283512.png')"
							@click="goScript">
							<view class="" style="color: #a7784e;font-size: 35rpx;">
								恋爱话术
							</view>
							<view class="" style="color: #e1c1a3;font-size: 30rpx;">
								实例学习
							</view>
						</view>
					</view>
					<view class="">
						<view class="r-content">
							<view class="r-shadow">
								<view class="" @tap="articleDetails(item,index)" style=" margin-top:30rpx; width: 49%;"
									v-for="(item,index) in articleList" :key="index">

									<view class="" style="margin-bottom: 20rpx;">

										<image @error="imgError($event,item)" :src="item.url" style="height: 200rpx;"
											mode="aspectFill"></image>
									</view>
									<view class="a"
										style="margin-bottom:30rpx; color:#000;font-size: 14px;font-weight: bold;">
										{{item.title}}
									</view>
									<view class="coup-introduce" style="">
										{{item.introduce}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="ends"></view>
		<tab-bar :currentPage="0"></tab-bar>
	</view>
</template>

<script>
	import search from "@/components/common/search.vue"
	import lsSwiper from '@/components/ls-swiper/index.vue'
	import {
		getBannerList,
		getAnnounList,
		getDictionType,
		getArticleIndex
	} from "@/api/lianai.js";
	import addTip from '@/components/wxcomponents/struggler-uniapp-add-tip/struggler-uniapp-add-tip.vue';
	export default {
		components: {
			search,
			lsSwiper,
		},
		data() {
			return {
				config: {
					title: "首页",
					back: {
						hide: true
					},
					color:"#ffffff"
				},
				article: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
					allListItem: false
				},
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				imageURL: "https://oss.mhwk.pro/1.png",
				testURL: "https://oss.mhwk.pro/2.png",
				encyclopediasURL: "https://oss.mhwk.pro/2.png",
				recommendURL: "https://oss.mhwk.pro/3.png",
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				informList: [{
					txt: "恋爱豆豆话术最新版"
				}],
				articleList: [{
					img: "https://img1.baidu.com/it/u=3006314136,2457157510&fm=253&fmt=auto&app=138&f=JPEG?w=610&h=474",
					title: "女生讨厌的聊天方式",
					content: "很多学员在面对女生的时候心态糟糕的不忍直视，而他们个人压根"
				}, {
					img: "https://img1.baidu.com/it/u=3006314136,2457157510&fm=253&fmt=auto&app=138&f=JPEG?w=610&h=474",
					title: "女生讨厌的聊天方式",
					content: "很多学员在面对女生的时候心态糟糕的不忍直视，而他们个人压根"
				}, {
					img: "https://img1.baidu.com/it/u=3006314136,2457157510&fm=253&fmt=auto&app=138&f=JPEG?w=610&h=474",
					title: "女生讨厌的聊天方式",
					content: "很多学员在面对女生的时候心态糟糕的不忍直视，而他们个人压根"
				}, {
					img: "https://img1.baidu.com/it/u=3006314136,2457157510&fm=253&fmt=auto&app=138&f=JPEG?w=610&h=474",
					title: "女生讨厌的聊天方式",
					content: "很多学员在面对女生的时候心态糟糕的不忍直视，而他们个人压根"
				}],
				//一页最多12个
				cList: [{
					children: [{
						name: "情人节"
					}, {
						name: "你想怎样",
						hotStatus: 1
					}, {
						name: "吵架"
					}, {
						name: "没见过",
						hotStatus: 1
					}, {
						name: "都是肉肉"
					}, {
						name: "抠门",
						hotStatus: 1
					}, {
						name: "情人节"
					}, {
						name: "你想怎样",
						hotStatus: 1
					}, {
						name: "吵架"
					}, {
						name: "没见过",
						hotStatus: 1
					}, {
						name: "都是肉肉"
					}, {
						name: "抠门",
						hotStatus: 1
					}]

				}, {
					children: [{
						name: "哦",
						hotStatus: 1
					}]
				}],
				hotCharList: [{
					name: "没见过",
					hotStatus: 1
				}, {
					name: "都是肉肉"
				}, {
					name: "抠门",
				}, {
					name: "抠门啊",
				}],
				baikeList: [{
					color: "#FCFEF3",
					img: "https://cdn.zhoukaiwen.com/zjx_banner.png",
					name: "重建吸引"
				}, {
					color: "#FDF3F2",
					img: "https://cdn.zhoukaiwen.com/zjx_banner3.png",
					name: "异地恋"
				}, {
					color: "#FFF3FF",
					img: "https://cdn.zhoukaiwen.com/zjx_banner1.png",
					name: "挽回沟通"
				}, {
					color: "#FBF6F0",
					img: "https://cdn.zhoukaiwen.com/zjx_banner3.png",
					name: "心态建设"
				}],
				testIssueList: [{
					image: "https://cdn.zhoukaiwen.com/zjx_banner.png",
					title: "测怎么做才能让别人欣赏你"
				}, {
					image: "https://cdn.zhoukaiwen.com/zjx_banner3.png",
					title: "测试你的撩妹指数"
				}, {
					image: "https://cdn.zhoukaiwen.com/zjx_banner1.png",
					title: "测试你的情商指数"
				}],
				bannerList: [{
						imgUrl: 'https://cdn.zhoukaiwen.com/zjx_banner.png'
					},
					{
						imgUrl: 'https://cdn.zhoukaiwen.com/zjx_banner3.png'
					},
					{
						imgUrl: 'https://cdn.zhoukaiwen.com/zjx_banner1.png'
					},
					{
						imgUrl: 'https://cdn.zhoukaiwen.com/zjx_banner2.png'
					}
				],
			};
		},
		watch: {},
		onLoad() {

		},
		mounted() {
			//获取banner
			this.getBannerList();
			//获取公告
			this.getAnnounList();
			//获取热门话术列表
			this.getDictionType();
			//获取首页文章列表
			this.getArticleIndex();
		},
		onLoad() {

		},
		methods: {
			goPopularList() {
				this.getDictionType()
			},
			toChat: function(item1) {
				console.log(item1)
				uni.navigateTo({
					url: "/pages/diction/detail?proId=" + item1.id

				})
			},
			//获取恋爱文章
			async getArticleIndex() {
				console.log('数据加载');
				uni.showLoading({title: '加载中'});
				getArticleIndex({
					"pageNum": this.article.pageNum,
					"pageSize": this.article.pageSize
				}).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						this.articleList = res.data.records;
						this.article.total = res.data.total
					}
				})
			},
			//获取热门话术分类
			getDictionType() {
				console.log('数据加载');
				uni.showLoading({title: '加载中'});
				getDictionType({}).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						console.log(res)
						this.cList = res.data;
					}
				})
			},
			//获取公告列表
			async getAnnounList() {
				console.log('数据加载');
				uni.showLoading({title: '加载中'});
				getAnnounList({}).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						console.log(res)
						this.informList = res.data;
					}
				})
			},
			//获取banner列
			async getBannerList() {
				console.log('数据加载');
				uni.showLoading({title: '加载中'});
				getBannerList({}).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						console.log(res)
						this.bannerList = res.data;
					}
				})
			},
			articleDetails(item, index) {
				uni.navigateTo({
					url: "/pages/project/detail?proId=" + item.id
				})
			},
			searchChange(val) {
				if (val == 'isSearchLogin') {
					this.$refs['modal'].modalName = 'Modal'
					this.adShow = true
				}
			},
			scroll: function(e) {
				console.log(e);
				this.old.scrollTop = e.detail.scrollTop;
			},
			goScript() {
				uni.switchTab({
					url: '/pages/diction/list'
				});
			},
			goRecommend() {
				uni.switchTab({
					url: '/pages/project/list'
				});
			},
			// 分享小程序
			onShareAppMessage() {
				return {
					title: '「恋爱豆豆话术」100W+恋爱话术，拯救尬聊神器',
					path: '/pages/index/index'
				};
			},
			//分享到朋友圈
			onShareTimeline() {
				return {
					title: '「恋爱豆豆话术」100W+恋爱话术，拯救尬聊神器',
					path: '/pages/index/index'
				}
			},
		}
	};
</script>
<!-- 内容样式 -->
<style lang="scss" scoped>
	.coup-introduce {
		color: #b2b2b2;
		font-size: 25rpx;
		text-overflow: ellipsis;
	}

	.r-shadow {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.e-font {
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		width: 125rpx;
	}

	.e-itemImg {
		width: 100rpx;
		height: 100rpx;
	}

	.e-img {
		width: 100rpx;
		height: 100rpx;
		margin: 0px auto;
	}


	.baike-box {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		overflow: auto;
		width: 100%;

		.baike-item {
			width: 400rpx;
			margin-right: 20rpx;
			text-align: center;
			background: #fdf3f2;
			border-radius: 10rpx;
			padding: .7rem;
		}
	}

	.s-swiper {
		font-size: 15px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.label {
			display: flex;
			margin-right: 3px;
			margin-top: 20rpx;
			align-items: center;
			background: #f5f5f5;
			padding: 3rpx 15rpx;
			border-radius: 50rpx;

			.hot {
				background: #ff9048;
				color: #fff;
				width: 18px;
				height: 18px;
				font-size: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				margin-left: 5rpx;
			}
		}
	}


	.text-issue-box {
		white-space: nowrap;
		margin-top: 20rpx;
		display: -webkit-box;
		align-items: center;
		width: 100%;
		overflow: auto;

		.t-item {
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 28rpx;
			width: 270rpx;
			height: 180rpx;
			border-radius: 15rpx;
			margin-right: 20rpx;
			text-align: center;
			background: url(https://xinlianai.app1212.com/admin/upload/2020121314565611f8cb507c3bb3a8c684adcf259cfa24.jpg) no-repeat;
			background-size: 100% 100%;

			view {
				width: 210rpx;
				word-break: break-all;
				text-align: center;
				white-space: normal;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;

			}
		}
	}


	.c-swiper {

		.label {
			display: flex;
			margin-right: 20rpx;
			margin-top: 20rpx;
			align-items: center;
			background: #f5f5f5;
			padding: 3rpx 15rpx;
			border-radius: 50rpx;

			.hot {
				background: #ff9048;
				color: #fff;
				width: 18px;
				height: 18px;
				font-size: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				margin-left: 5rpx;
			}
		}
	}

	.img-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 495rpx;
		height: 162rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;

		// padding-top: 48.5%;
		view {
			margin: 10rpx 50rpx;
		}
	}

	.r-swiper {
		display: flex;
		align-items: center;
		margin-top: 11px;

	}

	.recommend {
		padding: 16px;
		background: #fff;
		border-radius: 11px;
		margin-top: 15px;
	}


	.encyclopedias {
		padding: 16px;
		background: #fff;
		border-radius: 11px;
		margin-top: 15px;
	}


	.script {
		padding: 16px;
		background: #fff;
		border-radius: 11px;
		margin-top: 15px;
	}

	.test {
		padding: 16px;
		background: #fff;
		border-radius: 11px;
		margin-top: 15px;
	}

	.c-left {
		display: flex;
		align-items: center;
	}

	.c-right {
		display: flex;
		align-items: center;
		font-size: 16px;
		color: rgb(204, 204, 204);
	}

	.c-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.c-content {
		height: 121px;
		width: 90px;

	}

	.popular {
		padding: 16px;
		background: #fff;
		border-radius: 11px;

	}

	.c-icon {
		margin-right: 5px;
		width: 22px;
		height: 22px;
	}

	.c-title {
		font-size: 18px;
		font-weight: bold;

	}

	.ends {
		padding: 35px;
	}
</style>
<style lang="scss" scoped>
	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.message-box {
		width: 100%;
		height: 120rpx;
		background: url(https://zhoukaiwen.com/img/icon/clock.gif) #FFFFFF;
		background-repeat: no-repeat;
		background-size: 100rpx 100rpx;
		background-position: 15rpx 10rpx;
		margin: 0rpx 0rpx 10rpx 0rpx;
		padding-left: 130rpx;

		.message-tltle {
			height: 65rpx;
			line-height: 70rpx;
			font-weight: 600;
			font-size: 28rpx;
		}

		.message-content {
			color: #0081ff;

			span {
				background-color: #0081ff;
				color: #FFFFFF;
				padding: 2rpx 8rpx;
				border-radius: 8rpx;
				margin-right: 8rpx;
			}
		}
	}

	/*scroll-view外层*/
	.skill-sequence-panel-content-wrapper {
		position: relative;
		white-space: nowrap;
		padding: 10rpx 0 10rpx 10rpx;
	}

	/*左右渐变遮罩*/
	.hide-content-box {
		position: absolute;
		top: 0;
		height: 100%;
		width: 10px;
		z-index: 2;
	}

	.hide-content-box-left {
		left: 0;
		background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #f3f3f3 60%);
	}

	.hide-content-box-right {
		right: 0;
		background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #f3f3f3 60%);
	}

	.kite-classify-scroll {
		width: 100%;
		height: 380rpx;
		overflow: hidden;
		white-space: nowrap;
	}

	.kite-classify-cell {
		display: inline-block;
		width: 266rpx;
		height: 370rpx;
		margin-right: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);
	}

	.nav-li {
		padding: 40rpx 30rpx;
		width: 100%;
		background-image: url(https://s1.ax1x.com/2020/06/27/NyU04x.png);
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}

	.nav-name {
		font-size: 28upx;
		text-transform: Capitalize;
		margin-top: 20upx;
		position: relative;
	}

	.nav-name::before {
		content: '';
		position: absolute;
		display: block;
		width: 40rpx;
		height: 6rpx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}

	.nav-name::after {
		content: '';
		position: absolute;
		display: block;
		width: 100rpx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40rpx;
		opacity: 0.3;
	}

	.nav-content {
		width: 100%;
		padding: 15rpx;
		display: inline-block;
		overflow-wrap: break-word;
		white-space: normal;
	}

	.nav-btn {
		width: 200rpx;
		height: 60rpx;
		margin: 8rpx auto;
		text-align: center;
		line-height: 60rpx;
		border-radius: 10rpx;
	}

	.bg-index1 {
		background-color: #19cf8a;
		color: #fff;
	}

	.bg-index2 {
		background-color: #954ff6;
		color: #fff;
	}

	.bg-index3 {
		background-color: #5177ee;
		color: #fff;
	}

	.bg-index4 {
		background-color: #f49a02;
		color: #fff;
	}

	.bg-index5 {
		background-color: #ff4f94;
		color: #fff;
	}

	.bg-index6 {
		background-color: #7fd02b;
		color: #fff;
	}

	.item-name {
		margin-bottom: 15rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}


	/*通知公告*/
	.ad {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 12rpx;
	}

	.tctt {
		font-weight: bolder;
		width: 23vw;
		height: 8vw;
		line-height: 8vw;
		border-radius: 8vw 0 0 8vw;
		text-align: center;
		font-size: 28rpx;
		color: #E91E63;
		background: -webkit-linear-gradient(left, rgb(255, 255, 255), rgb(255, 255, 255));
	}

	.ad1 {
		width: 100%;
		background-color: #fff;
		border-radius: 0 20rpx 20rpx 0;
		overflow: hidden;
		margin: 12rpx;
	}

	.newest_content {
		flex: 1;
		height: 60rpx;
		float: left;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #333;
	}

	.gobyndsingle {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.adinfo {
		font-size: 26rpx;
		font-weight: bolder;
		text-indent: 2mm;
		width: 100%;
		background-clip: text;
		color: #E91E63;
	}

	.adinfo rich-text {
		width: 100%;
	}

	.swiper {
		margin: 0 auto;
		width: 686rpx;
		height: 330rpx;
	}

	.huandeng {
		height: 330rpx;
		width: 750rpx;
		background: linear-gradient(180deg, #ff7984, #ff7199 10%, rgba(255, 214, 41, .01) 40%);
	}

	.swiper-box {
		width: 686rpx;
		height: 330rpx;
		border-radius: 20rpx;
	}

	.swiper-box image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.swiper-box2 {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.scrolltop {
		width: 100%;
		height: 100%;
		padding-bottom: 15%;
	}

	.zanniu {
		min-height: 30px;
		width: 30%;
		margin-top: 10px;
		border-width: 1px;
		border-style: solid;
		border-color: rgb(255, 203, 170);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30px;
		border-bottom-right-radius: 30px;
		border-bottom-left-radius: 30px;
		border-top-right-radius: 30px;
		border-top-left-radius: 30px;
		position: absolute;
		top: 60%;
		left: 15%;
	}

	.yanniu {
		min-height: 30px;
		width: 30%;
		margin-top: 10px;
		border-width: 1px;
		border-style: solid;
		border-color: rgb(255, 203, 170);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30px;
		border-bottom-right-radius: 30px;
		border-bottom-left-radius: 30px;
		border-top-right-radius: 30px;
		border-top-left-radius: 30px;
		position: absolute;
		top: 60%;
		left: 55%;
	}

	.flex {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.iosbomm {
		padding-bottom: 35rpx;
		height: 130rpx;
	}

	.navbar-view3 {
		padding-bottom: 40rpx;
	}

	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		z-index: 9000;
		opacity: 0.7;
	}

	.modalDlg {
		width: 580rpx;
		height: 400rpx;
		position: fixed;
		top: 60%;
		left: 0;
		z-index: 9999;
		margin: -370rpx 85rpx;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		overflow: hidden;
	}

	.modalDlg>text {
		font-size: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.modalDlg>text:first-child {
		height: 80rpx;
		font-weight: 700;
		width: 100%;
		border-bottom: 1rpx solid #CCC;
	}

	.modalDlg>text:nth-child(2) {
		height: 100rpx;
		margin: 0 40rpx;
	}

	.modalDlg>view {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.modalDlg>view>button {
		width: 290rpx;
		height: 80rpx;
		font-size: 30rpx;
		border-radius: 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-weight: bolder;
		background-color: #fff;
	}

	.modalDlg>view>button::after {
		border-radius: 0;
	}
</style>
